import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = true;
  runApp(new _Login2Route());
}

class _LoginRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
              title: new Text("登陆")),
        body: Container(
          child: Center(
            child: Column(
              children: <Widget>[
                new Row(
                  children: <Widget>[
                    SizedBox(
                      width: 100,
                      height: 20,
                      child: TextField(
                        autofocus: true,
                        decoration: InputDecoration(
                          labelText: "账号",
                          hintText: "用户名或邮箱",
                          prefixIcon: Icon(Icons.person)
                        ),
                      ),
                    ),
                  ],
                ),
                Row(children: [
                  SizedBox(
                    width:100,
                    height:20,
                    child: TextField(
                      autofocus: true,
                      decoration: InputDecoration(
                        labelText: "密码",
                        hintText: "输入密码",
                        prefixIcon: Icon(Icons.lock)
                      ),
                      obscureText: true,
                    )
                  )
                ],)
              ],
            )
          )
        ),
      ),
    );
  }
}

class _Login2Route extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("登陆"),
        ),
        body: SizedBox.expand(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                width:200,
                height:40,
                child: TextField(
                  decoration: InputDecoration(
                    labelText: "账号",
                    hintText: "请输入你的账号",
                    prefixIcon: Icon(Icons.person)
                  ),
                )
              ),
              SizedBox(
                width:200,
                height:40,
                child: TextField(
                  decoration: InputDecoration(
                    labelText: "密码",
                    hintText: "请输入你的密码",
                    prefixIcon: Icon(Icons.lock)
                  ),
                  obscureText: true,
                )
              )
            ],
          ),
        ),
      )
    );
  }

}

// 父widget 为 StateMangementB 管理状态
class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new StateMangementB(
          active: _active,
          onChanged: _handleTapboxChanged,
        )
    );

  }
}


// StateMangementB
class StateMangementB extends StatelessWidget {
  StateMangementB({ Key? key, this.active: false, required this.onChanged }) : super(key: key);
  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        color: Colors.white,
        child: new Center(
          child: new ClipRRect(
            borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
            child: new Container(
                width: 180.0,
                height: 180.0,
                color: active ? Colors.lightGreen[700] : Colors.grey[600],
                child: new Center(
                    child: new Text(
                      active ? 'Active' : 'Inactive',
                      style: new TextStyle(fontSize: 32.0, color: Colors.white),
                      textDirection: TextDirection.ltr
                    )
                )
            ),
          ),
        ),
      ),
    );
  }

}



class RandomWords extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords>{
  @override
  Widget build(BuildContext context) {
    final wordPair =WordPair.random();
    return new Center(
      child: new Text(wordPair.asPascalCase),
    );
  }
}